<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body{
				background-color: transparent !important;
			}
			#content { width: 100%; position: fixed; left: 0; bottom:0; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling:touch; 
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				height: 230px;
				background-color: #fff;
			}
			
			.info_box{ display: block; width:100%;  background-color: #fff; box-sizing: border-box; padding: 0; z-index: 12;}
			.info_box .top{
				position: relative;
				display: flex;
				justify-content: space-between;
				background: #fff;
			}
			.info_box .top::after{ position: absolute; content: ""; left: 0; right: 0; bottom: 0; border-bottom: 1px #d4d4d4 solid; transform: scaleY(0.5);}

			.info_box1{ position: fixed; left: 0; bottom: 0; width:100%; height: 210px; background-color: #fff; box-sizing: border-box; padding: 0; z-index: 12;
				
			}
			.info_box1 .top{
				display: flex;
				justify-content: space-between;
				border-top-left-radius: 12px;
				border-top-right-radius: 12px;
			}
			.info_box .top div { font-size: 15px; padding:0 10px; font-weight:600; color:#666; height: 50px; line-height: 50px; }
			
			.a-active { color:#F77E1C !important; }
			.on { color:#3262F1 !important; }
		</style>
	</head>
	<body>
		<div id="filter" style="height:100%;">
		<div id="content">
		<!--完善信息弹窗start-->
		<div class="info_box">
			<div class="top">
				<div tapmode="a-active" onclick="closeframe()">取消</div>
				<div></div>
				<div tapmode="a-active" class="on" onclick="setRing()">完成</div>
			</div>
		</div>
		<!--完善信息弹窗end-->
		</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript">
		var datalist;
		var msgidx;
		var fristidx;
		apiready = function() {
			api.parseTapmode();
			datalist = [{'id':1,'value':'铃声一'},{'id':2,'value':'铃声二'},{'id':3,'value':'铃声三'}];
			selSection();
			//点击空白处移除Frame
			var myDiv = document.getElementById("filter");
			myDiv.addEventListener("touchstart",function(){
				closeframe();
				
			});
			var myDiv1 = document.getElementById("content");
			myDiv1.addEventListener("touchstart",function(event){
				event=event||window.event;
				event.stopPropagation();
			});
		}
		function closeframe() {
			api.closeFrame({
				name: api.frameName
			});
		}
		function playNotice(idx) {
			api.stopPlay();
			//播放提示音
			api.startPlay({
				path: 'widget://res/msg'+idx+'.mp3'
			}, function(ret, err) {
				if (ret) {
					//toast('播放完成');
				} else {
					//alert(JSON.stringify(err));
				}
			});
		}
		function setRing() {
			//$api.setStorage('localmsg', msgidx);
			api.setPrefs({
				key: 'localmsg',
				value: msgidx
			}, function(ret, err) {
				if(ret)
				{
					
				}
			});
			closeframe();
			
		}
		function selSection() {
			var UICustomPicker = api.require('UICustomPicker');
			UICustomPicker.open({
				rect: {
					x: 0,
					y: api.frameHeight  - 160,
					w: api.frameWidth,
					h: 160
				},
				styles: {
					bg: '#fff',
					normalColor: '#959595',
					selectedColor: '#000',
					selectedSize: 22,
					tagColor: '#000',
					tagSize: 20
				},
				data: [{
					scope : datalist
				}],
				rows: 3,
				autoHide: false,
				fixedOn: api.frameName,
				fixed: true
			}, function(ret, err) {
				//alert(JSON.stringify(ret));
				if (ret.eventType == "selected") {
					var idx = ret.data[0].id;
					msgidx = idx;

					if(fristidx != idx) {
						playNotice(idx);
						fristidx = 0;
					}
				}
				else if (ret.eventType == "show") {
					var cursel = 1;
					var moid = ret.id;
					api.getPrefs({
						key: 'localmsg'
					}, function(ret, err) {
						if (ret && ret.value)
						{
							cursel = ret.value;
							
						}
						fristidx = cursel;
						UICustomPicker.setValue({
							id: moid,
							data: [datalist[cursel - 1]]
						});
					});
					
				}
			});
		}
	</script>
</html>